<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>自定义指令</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="root">
      <h2>当前的n值是:<span v-text="n"></span></h2>
      <!-- 指令何时会被调用？ 
           1：指令与元素成功绑定时，即初始会调用一次
           2：指令所在的模板被重写解析时，就会调用（即使没修改依赖的属性） 
      -->
      <!-- 例如只修改名字，也会触发自定义指令的执行 -->
      <h2>{{name}}</h2>
      <h2>放大10倍后的n值是:<span v-big="n"></span></h2>
      <button @click="n++">点我n+1</button>
      <hr />

      <!-- 自定义指令复杂场景 -->
      <input type="text" v-fbind:value="n" />
    </div>
  </body>

  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data: {
        name: "尚硅谷",
        n: 1,
      },

      //重要，这里其实称为钩子，涉及生命周期

      //自定义指定，同样也是声明对象    理解为Java中的自定义注解
      directives: {
        //方法简写方式，只处理了bind和update
        big(element, binding) {
          //通过接收两个参数实现，element为页面真实DOM标签，binding为指令相关信息(表达式，值，指令名等)，核心是关注值
          console.log(element, binding);
          //执行具体逻辑，数值乘10
          element.innerText = binding.value * 10;
        },

        //需要使用完整写法，即对象写法，内部添加函数
        fbind: {
          //常见的有三个，bind，指令与元素成功绑定时
          bind() {
            element.value = binding.value;
          },
          //指令所在元素被插入页面时
          inserted() {
            element.focus();
          },
          //指令所在的模板被重写解析时
          update() {
            element.value = binding.value;
          },
        },
      },
    });
  </script>
</html>
